<template>
  <div ref="question" class="question container-full" id="question">
    <div class="container-sm">
      <div class="row gy-4">
        <div class="col-lg-4">
          <div class="content px-xl-5">
            <h3>常见问题</h3>
            <p></p>
          </div>
        </div>

        <div class="col-lg-8">
          <div class="accordion" id="yosong">
            <div class="accordion-item">
              <h3 class="accordion-header">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#faq-content-1">
                  <span class="index fw-bold m-2">1.</span>
                  <span class="fs-6 fw-bold">已合作对象?</span>
                </button>
              </h3>
              <div
                id="faq-content-1"
                class="accordion-collapse collapse"
                data-bs-parent="#faqlist">
                <div class="accordion-body">
                  桢田、铁科院、希力威视、迈外迪、levelone、好e灵、3onedata、ELIM、TO
                  TECH、Yealink、hasivo、CP PLUS 等...
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h3 class="accordion-header">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#faq-content-2">
                  <span class="index fw-bold m-2">2.</span>
                  <span class="fs-6 fw-bold">业务包含?</span>
                </button>
              </h3>
              <div
                id="faq-content-2"
                class="accordion-collapse collapse"
                data-bs-parent="#faqlist">
                <div class="accordion-body">
                  高铁、地铁、城轨铁路的网络；国内商业、工业级交换机产品定制；海外商业交换机产品的定制；国内、海外云管理的业务需求；俄罗斯，巴西海外运营商产品的定制。
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h3 class="accordion-header">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#faq-content-3">
                  <span class="index fw-bold m-2">3.</span>
                  <span class="fs-6 fw-bold">网络设备的布局及设想?</span>
                </button>
              </h3>
              <div
                id="faq-content-3"
                class="accordion-collapse collapse"
                data-bs-parent="#faqlist">
                <div class="accordion-body">
                  整个云网络拓扑图，是需要网络设备的整体网络统一，需要识别各种的网络设备（路由器，交换机，AP，AC）。现在我们已经可以识别我们的交换机，然后IPC和NVR可以通过很多协议进行识别。但是路由器，AP、AC的识别，我们也已经规划好了路由器的设备研发，当然我们也可以引入其他厂家现有的路由器，AP，AC这样的设备进入我们云网络中来。
                  <p>
                    未来的网络是一个集群化的网络，网络中会接入各种各样的网络产品及终端，我们公司将继续深耕云的集群化管理，以满足客户的未来的网络需求，也将为客户提供优质的云管理平台。
                  </p>
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h3 class="accordion-header">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#faq-content-4">
                  <span class="index fw-bold m-2">4.</span>
                  <span class="fs-6 fw-bold">规划的云的集群管理?</span>
                </button>
              </h3>
              <div
                id="faq-content-4"
                class="accordion-collapse collapse"
                data-bs-parent="#faqlist">
                <div class="accordion-body">
                  我们的目标是形成一个可视化的，简洁的，清晰的，分层的这样一个网络集群拓扑图。让用户清晰的知道网络拓扑结构是怎样的？网线是如何连接的，交换机设备和设备之间是如何连接的，哪个端口连接的哪个端口。把连接到交换机的终端也都识别出来，像IPC、NVR、PC、
                  AP、AC这些网路中常使用的设备。
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h3 class="accordion-header">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#faq-content-5">
                  <span class="index fw-bold m-2">5.</span>
                  <span class="fs-6 fw-bold">关于云平台接入?</span>
                </button>
              </h3>
              <div
                id="faq-content-5"
                class="accordion-collapse collapse"
                data-bs-parent="#faqlist">
                <div class="accordion-body">
                  有意愿接入此平台的设备终端，只需要配合菠萝密的云平台协议都可以接入进来。而且我们对于云平台，已经建立了更系统化，分级，分权限的管理框架。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import mittBus from '../utils/mittBus'

const question = ref<HTMLDivElement>()

const list = ref([
  {
    title: '已合作对象？',
    content:
      '高铁、地铁、城轨铁路的网络；国内商业、工业级交换机产品定制；海外商业交换机产品的定制；国内、海外云管理的业务需求；俄罗斯，巴西海外运营商产品的定制。',
  },
  {
    title: '业务包含？',
    content:
      '整个云网络拓扑图，是需要网络设备的整体网络统一，需要识别各种的网络设备（路由器，交换机，AP，AC）。现在我们已经可以识别我们的交换机，然后IPC和NVR可以通过很多协议进行识别。但是路由器，AP、AC的识别，我们也已经规划好了路由器的设备研发，当然我们也可以引入其他厂家现有的路由器，AP，AC这样的设备进入我们云网络中来。',
  },
  {
    title: '网络设备的布局及设想',
    content:
      '未来的网络是一个集群化的网络，网络中会接入各种各样的网络产品及终端，我们公司将继续深耕云的集群化管理，以满足客户的未来的网络需求，也将为客户提供优质的云管理平台。',
  },
  {
    title: '规划的云的集群管理',
    content:
      '我们的目标是形成一个可视化的，简洁的，清晰的，分层的这样一个网络集群拓扑图。让用户清晰的知道网络拓扑结构是怎样的？网线是如何连接的，交换机设备和设备之间是如何连接的，哪个端口连接的哪个端口。把连接到交换机的终端也都识别出来，像IPC、NVR、PC、 AP、AC这些网路中常使用的设备。</div>',
  },
  {
    title: '关于云平台接入',
    content:
      '有意愿接入此平台的设备终端，只需要配合菠萝密的云平台协议都可以接入进来。而且我们对于云平台，已经建立了更系统化，分级，分权限的管理框架。',
  },
])

onMounted(() => {
  window?.addEventListener('scroll', () => {
    if (question.value) {
      if (question.value.getBoundingClientRect().top <= 200) {
        mittBus.emit('switchActiveMenu', '提问')
      }
    }
  })
})
</script>

<style lang="scss" scoped>
.question {
  padding: 70px 0 80px 0;
  background-color: #fff;
  .index {
    color: red;
  }
  .accordion-item {
    margin-bottom: 20px;
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.06);
    background-color: #fff;
    border: 0 !important;
    .accordion-button {
      border: 0;
      background-color: #fff;
      box-shadow: none !important;
    }
  }
}
</style>
